<!--
 * @Author: your name
 * @Date: 2020-01-17 15:08:45
 * @LastEditTime : 2020-01-17 16:24:52
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-components\upload-img-demo\src\components\vueCropper.vue
 -->
<template>
  <div>
      <div style="width:100%;height:500px">
        <vue-cropper autoCrop img="https://shnhz.github.io/shn-ui/img/Koala.jpg" ref="cropper" centerBox/>
      </div>
      <el-button @click="getCropData">获取新图片</el-button>
  </div>
</template>

<script>
import { VueCropper }  from 'vue-cropper' 

export default {
    data () {
        return {
            
        }
    },
    components: {
      VueCropper,
    },
    methods: {
      getCropData() {
        this.$refs.cropper.getCropData(data => {
          console.log(data)
        })
      }
    }

}
</script>

<style>

</style>